<script>
  import { ref } from 'vue';
  import img1 from "/src/assets/avatar.jpg"
  import icon from "/src/assets/icon.png"
  import MessBlank_3 from './components/MessBlank_3.vue';
  import axios from "axios";

  export default {
    name:'MainPage',
    components:{MessBlank_3},
    mounted() {
      const userData = JSON.parse(sessionStorage.getItem('token'));
      this.token = userData.token;
      this.userID = userData.userID;
      console.log(this.token);
      axios.defaults.headers.common['Authorization'] = `${this.token}`;


  // 从后端获取消息数据
  const response_1 = axios.get('http://localhost:8080/users/'+this.userID);
      response_1.then((result) => {
          this.avatar = result.data.ProfilePhoto;
          console.log('applyAvatar:', this.avatar);
      }).catch((error) => {
          console.log(error);
      });

        axios
        .get('http://localhost:8080/messages/adoption/'+this.userID)
        .then((response) => {
          const data = response.data;
          console.log('领养信息',data);
          const filteredData = data.filter((item) => item.MessageType !== 'adopt_success');
      // 解析后端返回的数据，动态生成 MessBlank_3 的绑定数据
      this.messList = filteredData.map((item) => {
        // 基本信息提取
        const userName = item.UserInfo.UName;
        const PassageID=item.PassageID;
        const userAvatar = item.UserInfo.ProfilePhoto || "/src/assets/avatar.jpg"; // 默认头像
        const contact = item.UserInfo.Contact || "未提供";  // 如果没有联系方式，则显示默认值
        const contactType = item.UserInfo.ContactType || "未提供";  // 如果没有联系方式类型，则显示默认值
        const MessageType=item.MessageType;

        // 根据 MessageType 判断显示内容
        let messageContent = '';
        let adoptID;
        switch(item.MessageType) {
          case 'check_notice':
            messageContent='申请领养';
            adoptID=item.AdoptID;
            break;
          case 'request_fail':
            messageContent = '拒绝了你的领养申请';
            break;
          case 'request_success':
            messageContent = '同意了你的领养申请';
            adoptID=item.AdoptID;
            // 添加联系方式和联系方式类型
            switch(contactType) {
              case "0":
                messageContent += `,对方的微信:${contact} 请及时添加！`;
                break;
              case "1":
                messageContent += `,对方的QQ:${contact} 请及时添加！`;
                break;
              case "2":
                messageContent += `,对方的电话:${contact} 请及时添加！`;
                break;
              default:
                messageContent += `,联系方式:${contact}`; // 如果类型无法识别，直接显示联系方式
                break;
            }
            break;
          case 'adopt_fail':
            messageContent = '领养失败';
            break;
          case 'adopt_success':
            //messageContent = '评价了您并邀请您对领养体验作出评价';
            break;
          case 'comment_notice':
            messageContent = `对你作出了领养评价：${item.AdoptComment.Score}星 ${item.AdoptComment.Comment}\n领养已完成，快去'领养进程'查看进度吧！'`;
            messageContent = messageContent.replace(/\n/g, '<br>');  // 将所有 \n 转换为 <br>
            break;
          default:
            messageContent = '未知消息类型';
        }

        return {
          messageContent,  // 添加 messageContent 字段
          MessageType,
          PassageID,
          userAvatar,
          adoptID,
          userName
        };
      });
      console.log('Processed messList:', this.messList);  // 打印解析后的数据
    })
    .catch((error) => {
      console.error("获取消息数据出错:", error);
    });

},

    data(){
      return {
        img1,icon,
        avatar:null,
        input:ref(''),
        messList: []
      }
    },
    methods:{
      // 头像点击
      avaClick(){
        this.$router.push({path:'/UserPage',query:{id:this.userID}})
      },
      // 搜索点击
      searchClick(){
        this.headerComponent="Menu_3";
      },
      discoverClick(){
        this.$router.push({path:'/MainPage'})
      },
      adoptClick(){
        this.$router.push({path:'/AdoptPage'})
      },
      msgClick(){

      },
      postClick(){
        this.$router.push({path:'/PostPage'})
      },
      likeClick(){
        this.$router.push({path:'/Message/like'})
      },
      commentClick(){
        this.$router.push({path:'/Message/comment'})
      },
    }
  }
</script>

<template>
    <div class="layout" style="height:100vh;">
      <el-container >
            <el-header class="header" >
              <el-row
                  justify="space-between"
                  style="padding-top: 10px;padding-bottom: 10px">

                <!--头像-->
                <img :src="icon"
                     style="width:55px;height:55px;"
                     alt=""/>


                <el-avatar
                    :class="'avatar'"
                    :src="this.avatar"
                    :fit="'cover'"
                    :shape="'circle'"
                    :size="55"
                    @click="avaClick"
                />
              </el-row>
            </el-header>

            <el-container>
                <el-aside>
                    <el-menu
                        active-text-color="#FFD466"
                        default-active="3"
                    >
                      <el-menu-item class="aside" index="1" @click="discoverClick">
                        <el-icon :size="25" style="margin-right:10px;"><House /></el-icon>
                        <span>发现</span>
                      </el-menu-item>
                      <el-menu-item class="aside" index="2" @click="adoptClick">
                        <el-icon :size="25" style="margin-right:10px;"><Star /></el-icon>
                        <span>领养</span>
                      </el-menu-item>
                      <el-menu-item class="aside" index="3" @click="msgClick">
                        <el-icon :size="25" style="margin-right:10px;"><Message /></el-icon>
                        <span>消息</span>
                      </el-menu-item>
                      <el-menu-item class="aside" index="4" @click="postClick">
                        <el-icon :size="25" style="margin-right:10px;"><CirclePlus /></el-icon>
                        <span>发布</span>
                      </el-menu-item>
                    </el-menu>
                </el-aside>


              <el-container>
                <el-header style="height:40px;">
                  <el-menu
                    default-active="3"
                    style="display: flex;justify-content: center;height:40px;"
                    active-text-color="#FFD466"
                    mode="horizontal"
                  >
                    <el-menu-item class="chose" index="1" style="margin-right:15px" @click="likeClick">赞</el-menu-item>
                    <el-menu-item class="chose" index="2" style="margin-right:15px" @click="commentClick">评论</el-menu-item>
                    <el-menu-item class="chose" index="3" >领养申请</el-menu-item>
                  </el-menu>
                </el-header>

                <el-main class="mainPage">
                    <el-row style="justify-content:start;margin-left:10px;gap:10px;">
                      <!-- 循环渲染 messList 中的每一项 -->
                      <MessBlank_3
                        v-for="(item, index) in messList"
                        :key="index"
                        :userName="item.userName"
                        :userAvatar="item.userAvatar"
                        :messageContent="item.messageContent"
                        :MessageType="item.MessageType"
                        :PassageID="item.PassageID"
                        :adoptID="item.adoptID"
                      />
                    </el-row>
                  </el-main>
              </el-container>
            </el-container>


      </el-container>
    </div>
</template>


<style scoped>
.el-menu{
  border:0!important;
}

.chose{
  font-size:18px;
  font-weight:bold;
}
::v-deep(.chose:hover){
  background-color: #FFE9B2!important;
  color:#FFD466!important;
}
.el-menu-item.is-active{
  background-color: white!important;
  color:#FFD466!important;
}

.el-avatar{
  cursor: pointer;
}
.el-menu{
  border:0!important;
}
/*header样式*/
.header{
  /*background-color:black;*/
  height:60px;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  margin-bottom:20px;
}


/*aside*/
.el-aside{
  margin-left: 10px;
  width:180px;
  height:calc(100vh - 70px);
  padding-top:23vh;
}

.aside{
  height:65px;
  font-size:18px;
  font-weight:bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep(.aside:hover){
  background-color: #FFE9B2;
}


/*主页面*/
.mainPage{
  height:50vh;
}

</style>


